<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .aui-bar-nav {
            background: none;
        }

        body {
            background: linear-gradient(#FD6051, #F58927);
        }

        .aui-bar-nav .aui-iconfont {
            font-weight: bold;
        }

        #header {
            padding-top: 10%;
            background: #fff;
            color: #000;
        }

        #header a span {
            color: #000;
        }

        .top {
            width: 97%;
            height: 132px;
            background: rgba(255, 255, 255, 1);
            border-radius: 10px;
            margin: 0 auto;
            margin-top: 10px;
            padding: 20px 5px;
        }

        .top_a {
            display: flex;
            justify-content: space-between;
            text-align: center;
        }

        .top_a_pin img {
            width: 29px;
            height: 29px;
            margin: 0 auto;
        }

        .top_a_jt img {
            width: 21px;
            height: 16px;
            margin-top: 7px;
        }

        .top_a_pin {
            font-size: 12px;
            text-align: center;
            color: #666666;
            font-weight: 500;
        }

        .top_a_pin>div:nth-child(2) {
            margin-top: 10px;
        }

        .top_b {
            color: #FE4A4A;
            font-size: 15px;
            font-family: PingFang SC;
            text-align: center;
            font-weight: bold;
            margin-top: 17px;
        }

        .footer {
            width: 97%;
            /*height: 435px;*/
            margin: 0 auto;
            margin-top: 9px;
            background: #fff;
            margin-bottom: 100px;
            border-radius: 5px;
        }

        .fonter_a {
            display: flex;
            justify-content: space-between;
            padding: 0 16px;
            margin-bottom: 13px;
        }

        .fonter_a>div:nth-child(1) {
            color: #FE563A;
            font-size: 15px;
            height: 15px;
            margin-top: 17px;
        }

        .fonter_a>div:nth-child(2) {
            color: #FE563A;
            border: 1px solid rgba(254, 86, 58, 1);
            border-radius: 18px;
            width: 82px;
            height: 31px;
            text-align: center;
            line-height: 31px;
            font-size: 15px;
            margin-top: 9px;
        }

        .fonter_x {
            height: 1px;
            background: rgba(221, 221, 221, 1);
        }

        .fonter_b {
            display: flex;
            text-align: center;
            justify-content: space-around;
            margin-top: 19px;
        }

        .fonter_b>div {
            background: #FFB32F;
            border-radius: 5px;
            width: 157px;
            height: 72px;
        }

        .fonter_b>div>div:nth-child(1) {
            color: #FE4A4A;
            font-size: 17px;
            font-family: PingFang SC;
            font-weight: bold;
            margin-top: 15px;
        }

        .fonter_b>div>div:nth-child(2) {
            color: #fff;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
        }

        .fonter_c {
            width: 233px;
            height: 39px;
            background: #FE563A;
            border-radius: 20px;
            text-align: center;
            line-height: 39px;
            font-size: 15px;
            color: #fff;
            margin: 0 auto;
            margin-top: 21px;
        }

        .fonter_d {
            margin: 0 auto;
            ;
            width: 324px;
        }

        .fonter_d>div:nth-child(1) {
            height: 15px;
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FE563A;
            margin-top: 18px;
        }

        .fonter_d>div:nth-child(2) {
            margin-top: 16px;
            height: 159px;
            font-size: 12px;
            color: #666666;
            x;
            font-family: PingFang SC;
            font-weight: 500;
        }

        .none {
            display: none;
        }

        .recying {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
        }

        .recying>div:nth-child(1)>img {
            width: 287px;
            height: 433px;
            margin: 0 auto;
            margin-top: 110px;
        }

        .recying>div:nth-child(2)>img {
            width: 28px;
            height: 28px;
            margin: 0 auto;
            margin-top: 37px;
        }
    </style>
</head>

<body>

    <div id="app">
        <header id="header" class="aui-bar aui-bar-nav">
            <a class="aui-pull-left aui-btn" tapmode onclick="comeBack()">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">分享推广</div>
        </header>

        <div class="top">
            <div class="top_a">
                <div class="top_a_pin">
                    <div><img src="../image/rec/3.png" alt=""></div>
                    <div>生成二维码分享</div>
                </div>
                <div class="top_a_jt"><img src="../image/rec/6.png" alt=""></div>
                <div class="top_a_pin">
                    <div><img src="../image/rec/4.png" alt=""></div>
                    <div>好友扫码进入</div>
                </div>
                <div class="top_a_jt"><img src="../image/rec/6.png" alt=""></div>
                <div class="top_a_pin">
                    <div><img src="../image/rec/5.png" alt=""></div>
                    <div>做任务的佣金</div>
                </div>
            </div>
            <div class="top_b">好友做完任务并通过审核后，即可分成其佣金奖励</div>
        </div>
        <div class="footer">
            <div class="fonter_a">
                <div>我的好友邀请</div>
                <div tapmode onclick="openWin('rec_xq')">查看详情</div>
            </div>
            <div class="fonter_x"></div>
            <div class="fonter_b">
                <div>
                    <div>{{jinri}}</div>
                    <div>今日新增人数</div>
                </div>
                <div>
                    <div>{{muqian}}</div>
                    <div>目前下级人数</div>
                </div>
            </div>
            <div class="fonter_c" @click="playss(1)">生成推广二维码</div>
            <div class="fonter_d">
                <div>规则说明</div>
                <div v-html="rule">

                </div>
            </div>
            <div :class="play==0?'none':'recying'">
                <div><img :src="images" alt=""></div>
                <div @click="playss(0)"><img src="../image/rec/2.png" alt=""></div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../script/md5.min.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function() {
        var h = api.winHeight;
        $api.css($api.dom('body'), 'height:' + h + 'px;');
        vm = new Vue({
            el: "#app",
            data: {
                play: 0,
                id: 0,
                images: "",
                jinri: 0,
                muqian: 0,
                rule: ''
            },
            methods: {
                playss(e) {
                    console.log(e)
                    this.play = e;
                    var that = this;
                    if (e == 1) {

                        _ajax("user/poster", {}, function(res, err) {
                            console.log(JSON.stringify(res))
                            console.log(JSON.stringify(err))
                            if (res) {
                                var data = JSON.stringify(res);
                                console.log(data);
                                if (res.errCode == 0) {
                                    _msg(res.msg);
                                    that.play = 0;
                                    return
                                }
                                that.images = res.data
                            } else {
                                _msg("网络错误");
                                that.play = 0;
                            }
                        })
                    }
                },
            }
        })
        list();
        _downRefresh(function() {
            list();
            api.refreshHeaderLoadDone();
        });
        function list() {
            _loading();
            var that = this;
            _ajax("user/todayteamsum", {}, function(res, err) {
                console.log(JSON.stringify(res))
                if (res) {
                    var data = JSON.stringify(res);
                    console.log(data);
                    vm.jinri = res.data[0]
                    vm.rule = res.data[1]
                } else {
                    _msg("网络错误");
                }
                _loadingCloes();
            })
            _ajax("user/teamSum", {}, function(res, err) {
                console.log(JSON.stringify(res))
                if (res) {
                    var data = JSON.stringify(res);
                    console.log(data);
                    vm.muqian = res.data[0]
                } else {
                    _msg("网络错误");
                }
                _loadingCloes();
            })
        }
    };
    // };
</script>

</html>
